<template>
  <div class="orders">
    <!-- 面包屑 -->
    <div class="orders_top">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>订单管理</el-breadcrumb-item>
        <el-breadcrumb-item>订单列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="orders_name">
      <div class="orders_name_sou">
        <input type="text" placeholder="请输入内容" v-model="qwe" /><button
          @click="asd"
        >
          <i class="el-icon-search"></i>
        </button>
      </div>
      <div class="orders_name_bg">
        <el-table
          ref="singleTable"
          :data="tableDatas"
          highlight-current-row
          border
          style="width: 100%"
        >
          <el-table-column type="index" width="50" label="#"> </el-table-column>
          <el-table-column label="订单编号" width="300px">
            <template slot-scope="scope">
              <div>
                {{ scope.row.order_number }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="订单价格">
            <template slot-scope="scope">
              <div>
                {{ scope.row.order_price }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="是否付款">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.pay_status == 0"
                  ><el-tag type="danger">未付款</el-tag></span
                >
                <span v-else><el-tag>已付款</el-tag></span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="是否发货">
            <template slot-scope="scope">
              <div>
                {{ scope.row.is_send }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="下单时间">
            <template slot-scope="scope">
              <div>
                {{ scope.row.create_time | filtime }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <div>
                <el-button type="primary" @click="amendss(scope.row)"
                  ><i class="el-icon-edit"></i
                ></el-button>
                <el-button type="success" @click="dialogVisible = true"
                  ><i class="el-icon-location-outline"></i
                ></el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagenum"
          :page-sizes="[1, 2, 3]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
        <!-- 位置弹框 -->
        <el-dialog title="物流进度" :visible.sync="dialogVisible" width="70%">
        </el-dialog>
        <!-- 修改地址 -->
        <el-dialog title="修改状态" :visible.sync="amends" width="70%">
          <p>订单是否发货:<input type="text" class="po" v-model="is_send" /></p>
          <p>订单支付:<input type="text" class="po" v-model="order_pay" /></p>
          <p>订单价格:<input type="text" class="po" v-model="order_price" /></p>
          <p>
            订单数量:<input type="text" class="po" v-model="order_number" />
          </p>
          <p>支付状态:<input type="text" class="po" v-model="pay_status" /></p>
          <span slot="footer" class="dialog-footer">
            <el-button @click="amends = false">取 消</el-button>
            <el-button type="primary" @click="qws">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  //数据
  data() {
    return {
      amends: false,
      qwe: "",
      dialogVisible: false,
      tableDatas: [],
      total: 1,
      query: "",
      pagenum: 1,
      pagesize: 5,
      user_id: "",
      pay_status: "",
      is_send: "",
      order_fapiao_title: "",
      order_fapiao_company: "",
      order_fapiao_content: "",
      consignee_addr: "",
      id: "",
      order_pay: "",
      order_price: "",
      order_number: "",
    };
  },
  //挂载后
  mounted() {
    this.orders();
  },
  //方法
  methods: {
    orders() {
      this.$http({
        url: "orders",
        method: "get",
        params: {
          query: this.querys,
          pagenum: this.pagenum,
          pagesize: this.pagesize,
          user_id: this.user_id,
          pay_status: this.pay_status,
          is_send: this.is_send,
          order_fapiao_title: this.order_fapiao_title,
          order_fapiao_company: this.order_fapiao_company,
          order_fapiao_content: this.order_fapiao_content,
          consignee_addr: this.consignee_addr,
        },
      }).then((res) => {
        if (res.meta.status == 200) {
          this.$message({
            message: res.meta.msg,
            type: "success",
          });
          this.tableDatas = res.data.goods;
          this.total = res.data.total;
        } else {
          this.$message({
            message: res.meta.msg,
            type: "error",
          });
        }
      });
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.orders();
    },
    handleCurrentChange(val) {
      this.pagenum = val;
      this.orders();
    },
    asd() {
      this.qwe = "";
      this.orders();
    },
    amendss(item) {
      console.log(item);
      this.amends = true;
      this.id = item.user_id;
      this.is_send = item.is_send;
      this.order_pay = item.order_pay;
      this.order_price = item.order_price;
      this.order_number = item.order_number;
      this.pay_status = item.pay_status;
      this.orders();

    },
    qws() {
      this.id = "";
      this.amends = false;
      this.is_send = "";
      this.order_pay = "";
      this.order_price = "";
      this.order_number = "";
      this.pay_status = "";
    },
  },
  //过滤，筛选
  filters: {
    filtime(val) {
      var time = "";
      if (val) {
        var date = new Date(val);
        let year = date.getFullYear();
        let month = date.getMonth() + 1;
        let day = date.getDate();
        let hour = date.getHours();
        let min = date.getMinutes();
        let sec = date.getSeconds();
        time = `${year}-${month}-${day}${hour}:${min}:${sec}`;
      }
      return time;
    },
  },
};
</script>

<style lang="scss">
.orders_top {
  width: 100%;
  height: 50px;
}
.orders_name {
  width: 100%;
  background-color: white;
  border-radius: 5px;
}
.orders_name_sou {
  width: 98%;
  height: 50px;
  line-height: 50px;
  margin-bottom: 10px;
  margin-left: 20px;
  input {
    width: 200px;
    height: 30px;
    border: 1px solid4 #ccc;
    vertical-align: middle;
    padding-left: 10px;
    outline: none;
  }
  button {
    width: 50px;
    height: 30px;
    border: 1px solid #ccc;
    border-left: none;
    vertical-align: middle;
    outline: none;
  }
}
.po {
  width: 350px;
  height: 30px;
  margin-top: 10px;
}
</style>
